<template>
     <!--使用组件-->
      <div>
          <city-header></city-header>
          <city-search :cities="cityList"></city-search>
          <city-list
            :hotCity="hotCity"
            :cityList="cityList"
            :letter="letter"
          ></city-list>
          <city-aside :aside="cityList" @change="cityClickChange"></city-aside>
      </div>
</template>

<script>
    //引入组件
    import CityHeader from '@/pages/city/components/Header'
    import CitySearch from '@/pages/city/components/Search'
    import CityList from '@/pages/city/components/List'
    import CityAside from '@/pages/city/components/Aside'

    import axios from 'axios'  //请求数据
    export default {
        name: "City",
        components:{
           CityHeader,
           CitySearch,
           CityList,
           CityAside
        },
        data () {
            return {
              hotCity:[],
              cityList:{},
              letter:'',//用于存储点击的字母
            }
        },
         methods : {
            getCityInfo () {
               axios.get('/static/moke/city.json').then(this.getSucc);
            },
            getSucc(res){
              // console.log(res);
              res=res.data;
              if(res.ret && res.data){
                const data=res.data;
                 this.hotCity=data.hotCities;//热门城市
                 this.cityList=data.cities;//热门城市
              }
            },
           cityClickChange (letter) {
                this.letter=letter;
                // console.log(this.letter);
             }
            },
         mounted () {
            this.getCityInfo();
         }
    }
</script>

<style scoped>

</style>
